<template>
  <div class="overflow forget-password">
    <div class="forget-content normal content-main">
      <h1 class="forget-title">修改密码</h1>
      <div class="forget-input">
        <el-input placeholder="请输入新密码" v-model="resetForm.password" maxlength="18" type="password" />
        <el-input
          class="margin--top"
          placeholder="请确认新密码"
          v-model="resetForm.repeat"
          maxlength="18"
          type="password"
        />
        <el-input
          class="margin--top"
          placeholder="请输入验证码"
          v-model="resetForm.authCode"
          maxlength="6"
        />
        <el-button class="submit-btn" @click="handleSubmitForm">修改密码</el-button>
      </div>
      <nuxt-link class="active" to="/">
        <i class="el-icon-back"></i>
        返回首页
      </nuxt-link>
    </div>

    <div class="cover-layer" v-if="showLoadingLayer">
      <i class="el-icon-loading"></i>
    </div>
  </div>
</template>

<script>
import API from '~/interface/User';
import Cookie from 'js-cookie';
import formRule from '~/static/utils/Rules';
export default {
  data() {
    return {
      resetForm: {
        email: '',
        password: '',
        repeat: '',
        authCode: ''
      },
      showLoadingLayer: false
    }
  },

  methods: {
    // 发送邮箱验证码
    sendEmailCodeMessage(email) {
      API.postChangeCode({ email }).then(res => {
        this.$message({
          type: 'success',
          message: res.msg
        });
      });
    },
    // 重置密码
    handleSubmitForm() {
      let { checkLength } = formRule;
      let { password, repeat, authCode } = this.resetForm;

      if (!checkLength(password, 6, 18)) {
        this.$message.error('密码长度至少6位最多18位!');
        return false;
      }

      if (repeat !== password) {
        this.$message.error('两次输入的密码不一致!');
        return false;
      }

      if (authCode.length !== 6) {
        this.$message.error('请输入正确的验证码!');
        return false;
      }

      if (sessionStorage.cacheEmail) {
        this.resetForm.email = sessionStorage.cacheEmail;
      }

      this.showLoadingLayer = true;
      API.postPasswordChange(this.resetForm).then(res => {
        this.showLoadingLayer = false;
        this.$message({
          type: 'success',
          message: '密码修改成功~'
        });

        // 如果是修改密码 那么把覆盖原先的token
        if (res.token) {
          Cookie.set('rabbit_token', res.token, { expires: 3 });
        }
        sessionStorage.removeItem('cacheEmail');
        this.$router.replace('/');
      }).catch(err => {
        this.showLoadingLayer = false;
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.forget-password {
  position: relative;
  height: 100%;

  .forget-content {
    width: 500px;
    margin: 120px auto 0;

    .forget-input {
      margin: 15px 0;

      .flex-space .el-button {
        margin-left: 10px;
      }

      .el-button {
        min-width: 115px;
        border-radius: 0;
      }
    }

    .submit-btn {
      width: 100%;
      margin-top: 15px;
      background-color: var(--theme);
      border-color: var(--theme);
      color: #fff;
    }
  }

  .cover-layer .el-icon-loading {
    font-size: 50px;
    color: #fff;
  }
}
</style>